<template>
    <div class="cgx">
        <div class="cgx-title">
            <div class="left">
                草稿箱列表
            </div>
            <div class="right">
                共计 {{ total }} 项
            </div>
        </div>
        <div class="loading-box" v-if="loading">
            <van-loading color="#1989fa">
                加载中...
            </van-loading>
        </div>
        <div v-else>
            <div class="cg-list" v-if="tableList.length > 0">
                <div class="cg-item" v-for="(item, index) in tableList" :key="index">
                    <div class="cg-content">
                        <!-- 具体工作内容 -->
                        <div class="content-box">
                            <div class="label">具体工作内容：</div>
                            <div class="value">{{ item.workContent }}</div>
                        </div>
                        <!-- 业务类型 -->
                        <div class="content-box">
                            <div class="label">业务类型：</div>
                            <div class="value"> {{ item.businessType }}</div>
                        </div>
                        <!-- 主要责任单位 -->
                        <div class="content-box">
                            <div class="label">主要责任单位：</div>
                            <div class="value"> {{ codeToText(item, 'mainBusinessUnitOrgCode', 'org') }}</div>
                        </div>
                        <!-- 分管领导 -->
                        <div class="content-box">
                            <div class="label">分管领导：</div>
                            <div class="value">
                                {{ codeToText(item, 'workLeader', 'ld') }}
                            </div>
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="btn" style="color:#f56c6c" @click="delDraft(item)">删除</div>
                        <div class="line"></div>
                        <div class="btn" style="color:#409eff" @click="editDraft(item)">修改</div>
                    </div>
                </div>
            </div>
            <van-empty v-else description="暂无草稿" />
            <div class="pagination-box" v-if="tableList.length > 0">
                <van-pagination v-model="params.pageNo" :total-items="total" :items-per-page="params.pageSize"
                    @change="getDraftPage" />
            </div>
        </div>

    </div>
</template>

<script setup>
import { draftPage, draftDel, workProgressById } from '@/service/yearWork'
import { useUser } from "@/stores/user"
import { codeToText } from "@/utils/tool"
import { showConfirmDialog, showSuccessToast } from 'vant';
const userStore = useUser()
const router = useRouter()
const params = reactive({
    pageNo: 1,
    pageSize: 10,
    deleteFlag: 0,
    applicantId: userStore.userInfo.userId,
    draftStatus: "草稿"
})
let loading = ref(true)
const tableList = ref([])
const total = ref(0)
// 获取草稿列表
async function getDraftPage() {
    loading.value = true
    const res = await draftPage(params)
    if (res.code == 0) {
        tableList.value = res.data.records.map((item, index) => {
            let json = JSON.parse(item.draftContent)
            let workStep = [
                {
                    id: index + '-1',
                    title: '年度计划进度：',
                    worker: "",
                    time: "",
                    content: json.annualPlan
                },
                {
                    id: index + '-2',
                    title: '推进完成情况：',
                    worker: "",
                    time: "",
                    content: json.workProgress
                },
                {
                    id: index + '-3',
                    title: '需要说明事项：',
                    worker: '',
                    time: '',
                    content: json.workStatement
                },
                {
                    id: index + '-4',
                    title: '备注：',
                    worker: '',
                    time: '',
                    content: json.workNote
                }
            ]
            if (json.superviseComment) {
                workStep.push({
                    id: index + '-5',
                    title: '督办意见：',
                    worker: "",
                    time: "",
                    content: json.superviseComment
                })
            }
            item.workStep = workStep
            return { ...item, ...json }
        })
        total.value = res.data.total
        loading.value = false
    }
}

// 删除草稿
async function delDraft(row) {
    showConfirmDialog({
        message: '确定删除该草稿吗？',
    })
        .then(async () => {
            const res = await draftDel({ objectId: row.objectId })
            if (res.code == 0) {
                showSuccessToast('删除成功');
                getDraftPage()
            }
        })
        .catch(() => {
            // on cancel
        });
}

// 修改草稿
async function editDraft(row) {
    if (row.relatedWorkId) {
        // 判断源数据是否该存在，存在则继续走编辑项目。不存在则提示是否删除
        workProgressById(row.relatedWorkId).then(res => {
            if (res.code == 0) {
                if (res.data.isDeleted == 1) {
                    showConfirmDialog({
                        message: '该草稿对应原年度工作计划已删除，是否删除该草稿？',
                    }).then(() => {
                        draftDel({ objectId: row.objectId }).then((res) => {
                            if (res.code == 0) {
                                showSuccessToast('删除成功')
                                getDraftPage()
                            }
                        })
                    })
                }
            }
        })
    } else {
        router.push({
            path: '/cgx/edit',
            query: {
                rowData: JSON.stringify(row),
                type: "edit"
            }
        })
    }

}



onMounted(() => {
    getDraftPage()
})

</script>

<style lang="scss" scoped>
.cgx {
    color: rgba(51, 51, 51, 1);
    padding: 0 26px;
    box-sizing: border-box;
    // overflow-y: scroll;
    // height: calc(100vh - 92px - 10px - 140px);

    .cgx-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        >div {
            font-size: 27px;
            font-weight: bold;
        }

    }

    .loading-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 92px - 10px - 140px - 120px);
    }

    .cg-list {
        overflow-y: scroll;
        height: calc(100vh - 92px - 10px - 140px - 120px);

        .cg-item {
            margin-bottom: 15px;
            padding: 20px 20px 0 20px;
            box-sizing: border-box;
            // min-height: 250px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px rgba(42, 130, 228, 0.1);

            .cg-content {
                font-size: 24px;

                .content-box {
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;

                    .label {
                        font-weight: bold;
                    }

                    .value {
                        width: 72%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }

            .btn-group {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                padding-top: 5px;
                border-top: 1px solid rgba(225, 225, 225, 1);

                .btn {
                    text-align: center;
                    line-height: 65px;
                    color: rgba(166, 166, 166, 1);
                    flex: 1
                }

                .line {
                    width: 1px;
                    height: 60px;
                    background: rgba(225, 225, 225, 1)
                }
            }
        }
    }
}

.pagination-box {
    margin-top: 20px;
}
</style>